@import "../../../assets/scss/global";
@import "../../../assets/scss/mixins/palette";

.sidebar-flex div button {
  position: absolute;
  bottom: 49px;
  left: 8px;
  background: none;
  border: none;
  color: #171717;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  &:hover {
    opacity: 0.7;
  }
  i {
    color: #171717;
  }
}

::ng-deep {
  .mat-list.mat-list-base {
    user-select: none;

    .mat-list-item.workspace-menu {
      height: 55px !important;
    }
  }

  .mat-menu-content {
    .mat-menu-item.workspace-select-item {
      display: flex;
      height: 50px !important;
      padding: 0 10px;
      margin-bottom: 5px;
      margin-left: 5px;
      margin-top: 5px;
      align-items: center;
    }
  }

  .mat-line {
    font-size: 15px;

    &:hover {
      &:not(.workspace-menu-line) {
        all: unset !important;
      }

      transition: all 0.2s ease;
      opacity: 0.7;
    }
  }

  .mat-list-item-content {
    cursor: pointer;
    margin-top: 2px;
    margin-bottom: 2px;

    i {
      font-size: 20px;
    }

    i:not(.moon-Home) {
      margin-right: 8px;
      position: relative;
      top: -1px;
    }

    .moon-Close {
      display: none;
      position: absolute;
      top: 2px;
      right: 15px;
      opacity: 0.7;
    }
  }

  .moon-Row {
    top: -2px !important;
  }

  .mat-list-item-content:hover i.moon-Close {
    display: inline-block !important;
    color: $text-color;
    font-size: 18px;
    margin-top: 6px;
    margin-right: 3px;
    opacity: 0.7;
    right: 3px;
  }

  .visible-option-menu {
    flex-grow: 1;
  }
}

::ng-deep {
  .mat-list-text div span:not(.workspace-name-initial) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    width: 150px;
    margin-top: 5px;
  }
}

.selected-segment {
  background-color: $silver-25;
  border-radius: 6px;
  margin-left: 10px !important;
  width: 218px !important;
  transition: all 0.2s ease;
}

::ng-deep {
  .mat-expansion-panel-header {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  .selected-segment .mat-list-item-content .mat-list-text {
    margin-left: -10px;
  }
}

div.space-between-mat-lists {
  position: relative;
  height: 13px;
}

.sidebar-flex {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

::ng-deep {
  .mat-expansion-indicator {
    display: none;
    margin-top: -4px;
  }

  .mat-list-item.selected-segment:hover {
    background-color: $silver-25 !important;
  }

  .mat-list-item.selected-segment:hover .mat-list-item-content .mat-list-text .mat-line {
    transition: unset;
    opacity: 1;
  }
}

i.moon-Caret-down {
  position: relative;
  top: 2px;
  left: 87px;
  font-size: 20px;
  color: inherit;
  transition: all 0.3s ease;
}

::ng-deep {
  .mat-expansion-panel-header:not([aria-disabled=true]) {
    width: 250px;
  }

  .mat-expanded .mat-content mat-panel-title .mat-subheader i.moon-Caret-down {
    display: inline-block;
    transform: rotate(180deg);
    transition: all 0.3s ease;
  }
}

.mat-list-base .mat-list-item .workspace-menu:hover {
  background: #f9f9f9;
  border-radius: 6px;
  margin-left: 10px !important;
  width: initial !important;
  margin-right: 12px;
  padding: 0;
}

.workspace-menu, .workspace-select-item {
  .workspace-name {
    padding-left: 10px;
    margin-top: auto;
    margin-bottom: auto;
    flex-grow: 1;
    font-size: 15px;
  }

  .workspace-name-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    span {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 180px;
    }

    span:nth-child(1) {
      font-size: 15px;
      line-height: initial;
      padding-left: 10px;
    }

    span:nth-child(2) {
      font-size: 12px;
      color: $table-text;
      line-height: initial;
      padding-left: 10px;
      padding-top: 2px;
    }
  }

  .workspace-menu-line {
    display: flex;
  }

  & .moon-Caret-down {
    margin: auto;
    position: initial;
  }

  .workspace-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 40px;
    height: 40px;
    border: solid $silver-50 1px;
    border-radius: 5px;

    &.local {
      background-color: $local-workspace-blu;
    }

    &.remote {
      background-color: $remote-workspace-purple;

      span {
        color: $white-text-color;
        font-size: 16px;
      }
    }

    i {
      position: relative;
      top: 0;
      color: $white-text-color;
    }
  }
}

.segment-row {
  i.moon-Close {
    position: absolute!important;
    top: 2px!important;
    right: 2px!important;
  }
}

::ng-deep {
  .mat-list .workspace-menu {
    .mat-list-item-content {
      padding-left: 10px !important;
      padding-bottom: 15px !important;
    }
  }

  .mat-menu-panel .mat-menu-content {
    .mat-menu-item {
      img {
        width: 20px;
        margin-right: 7px;
        margin-left: -5px;
      }
    }
  }
}

.mat-list-base .mat-list-item.workspace-menu:hover {
  background: none !important;
  width: unset !important;
}

app-sync-pro-widget {
  width: 100%;
}
